/* eslint-disable */
import React, { Component } from 'react';
import { Col, DatePicker, Carousel, Divider, Icon } from 'antd';
import moment from 'moment';
import styles from './index.less';
import CockpitBox from '../../../components/cockpit/CockpitBox';
import CockpitArrow from '../../../components/cockpit/CockpitArrow';
import Title from './Title';
import CockpitCarousel from '../../../components/cockpit/CockpitCarousel';
import WarningInfo from './WarningInfo';
// // import ChartLines from './Charts/ChartLines';
// // import ChartPie from './Charts/ChartPie';
// // import RightChartPie from './Charts/RightChartPie';
// // import LeftCenter1 from './Charts/LeftCenter1';
// // import LeftCenter2 from './Charts/LeftCenter2';
// // import LeftCenter3 from './Charts/LeftCenter3';
// // import ChartBar from './Charts/ChartBar';
// // import RightChartBar from './Charts/RightChartBar';
// // import RightChartBarSSYQ from './Charts/RightChartBarSSYQ';
// // import CockpitSituational from '../../../components/cockpit/CockpitSituational';
import ChartBars from './Charts/ChartBars';
import MyIcon from '../../../components/common/MyIcon';
import CockpitModal from '../../../components/cockpit/CockpitModal';
import Myccljcl from '../Echarts/Myccljcl';
import Myhbzbpf from '../Echarts/Myhbzbpf';
import Myljclfx from '../Echarts/Myljclfx';
import Mynytjfx from '../Echarts/Mynytjfx';
import Myhchlfx from '../Echarts/Myhchlfx';
import request from '../../../utils/request';
import CockpitMyPagination from '../../../components/common/CockpitMyPagination';
const { MonthPicker } = DatePicker

class RightContent extends Component {
  state = {
    tabKey: 1,
    isShowBigImgModal: false,     // 大图查看弹窗
    bigImgSrc: '',
    pageSize: 3,
    total: 0,
    pageIndex: 1,
    params: {},
    ssjc: 5,
    ssjcData: []
  }

  componentDidMount() {
    this.ssjcbj(1, 3)
  }

  ssjcbj = (page, rows) => {
    let params = {
      page,
      rows: 3,
      type: this.state.ssjc
    }
    this.setState({
      params,
      pageIndex:1
    })
    request({
      url: '/sx-client/sx/onepic/ssjcbj',
      method: 'POST',
      data: params
    }).then(data => {
      if (data.rc === 0) {
        this.setState({
          ssjcData: data.ret.items,
          total: data.ret.count
        })
      }

    })

  }

  componentWillReceiveProps(nextProps) {
    if (this.props.type != nextProps.type) {
      this.setState({
        tabKey: 1,
      })
    }
  }
  onMoreClick = () => {
    this.setState({
      isShowWuFeiModal: !this.state.isShowWuFeiModal
    });
  }

  onTabChange = (key) => {
    this.setState({
      tabKey: key
    })
  }

  // 生活垃圾
  getshljContent = () => {
    let { tabKey } = this.state;
    const data = [
      {
        tm: "2020-1-5 12:21",
        content: "浙D21FF2  车速异常，报警值87km/h",
        state: 1,
        people: "处理人：刘小平"
      },
      {
        tm: "2020-1-5 10:32",
        content: "浙D21FF2  停留时间过长，停留时间13分钟",
        state: 1,
        people: "处理人：刘小平"
      },
      {
        tm: "2020-1-5 9:54",
        content: "浙D21FF2  线路异常，偏离既定路线",
        state: 1,
        people: "处理人：刘小平"
      },
      {
        tm: "2020-1-5 8:32",
        content: "浙D21FF2  车速异常，报警值87km/h",
        state: 1,
        people: "处理人：刘小平"
      },
      {
        tm: "2020-1-5 7:39",
        content: "联庄小区 投递点，视频信号遗失",
        state: 1,
        people: "处理人：张三"
      }
    ];
    const data1 = [
      {
        tm: "2020-1-5 12:21",
        content: "清能环保  炉温异常，报警值763℃",
        state: 1,
        people: "处理人：徐剑"
      },
      {
        tm: "2020-1-5 10:32",
        content: "清能环保  NOx超标，报警值459mg/m3",
        state: 1,
        people: "处理人：徐剑"
      },
      {
        tm: "2020-1-5 9:54",
        content: "维尔利餐厨厂  烟尘超标，报警值191mg/m3",
        state: 1,
        people: "处理人：徐剑"
      },
      {
        tm: "2020-1-5 8:32",
        content: "再生能源厂  SO2超标，报警值174mg/m3",
        state: 1,
        people: "处理人：徐剑"
      },
      {
        tm: "2020-1-5 7:39",
        content: "清能环保  烟尘超标，报警值89mg/m3",
        state: 1,
        people: "处理人：徐剑"
      }
    ];
    const xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];

    const pieData = {
      data: [
        { value: 2985.843, name: '越城区' },
        { value: 3280.212, name: '柯桥区' },
        { value: 4142.319, name: '上虞区' },
        { value: 3196.104, name: '新昌县' },
        { value: 4058.211, name: '嵊州市' },
        { value: 3364.32, name: '诸暨市' },
      ],
      legendData: { '越城区': { ratio: '14.2%' }, '柯桥区': { ratio: '15.6%' }, '上虞区': { ratio: '19.7%' }, '新昌县': { ratio: '15.2%' }, '嵊州市': { ratio: '19.3%' }, "诸暨市": { ratio: '16%' } }
    };
    const xDataBar = ['1月', '2月', '3月', '4月', '5月', '6月'];
    const barData = [939, 342, 321, 301, 298, 298];
    const barData2 = [239, 342, 41, 312, 291, 295];
    const barData3 = [39, 312, 321, 12, 298, 85];
    return (
      <div>

        <div className={styles["TopBox"]}>
          {/* <div className={styles["TopBox-cile"]} > <LeftCenter1 /> <div>产废(万吨)</div></div> */}
          {/* <div className={styles["TopBox-cile"]} > <LeftCenter2 /> <div>利用(万吨)</div></div> */}
          {/* <div className={styles["TopBox-cile"]} > <LeftCenter3 /> <div>处置(万吨)</div></div> */}
        </div>
        <div className={styles["line"]}></div>
        <div className={styles["zhlyl"]}>
          <div>【综合利用率】 <span style={{ color: '#4ED1E9', marginLeft: 10 }}>88.94%</span></div>
          <div className={styles["heng"]}></div>
          <div></div>
          <div className={styles["tongbi"]}>
            <span><MyIcon className={'icon-shangsheng'} /> 同比   10.2%</span>
            <span><MyIcon className={'icon-shangsheng'} />环比   5.7%</span>
          </div>
        </div>
        <div className={styles["line"]}></div>
        {/* <ChartBar xData={xDataBar} yLabel='' data={barData} data2={barData2} data3={barData3} title='产生/利用/处置' /> */}
      </div>
    )
  }
  getshljContent2 = () => {
    return (
      <div>
        {/* <RightChartBar onRightChartBar={this.onRightChartBar} /> */}
      </div>
    )
  }

  onRightChartBar = (name) => {
    // console.log('右边被点击了',name)
    this.props.onRightChartBar(name)
  }

  // 项目现场图片
  getXiangMuTP = (img, title) => {
    let t = this;
    let onClick = () => {
      t.props.getImgInfo();
    }
    return (
      <CockpitBox
        title={title || "项目现场图片"}
        icon="icon-bancai-"
        className={styles["xiang-mu-tp-wrapper"]}
      >
        <div className={styles["inner"]}>
          <img src={img || require("../../../assets/devote-3.png")} />
          <div>查看</div>
          <MyIcon
            onClick={onClick}
            className={styles["big"]}
            type="icon-fangda"
          />
        </div>
      </CockpitBox>
    )
  }

  // 项目流程展示
  getXiangMuLC = () => {
    let t = this;
    let onClick = () => {
      t.props.getImgInfoLct();
    }
    return (
      <CockpitBox
        title="项目现场图片"
        icon="icon-bancai-"
        className={styles["xiang-mu-tp-wrapper"]}
      >
        <div className={styles["inner"]}>
          <img src={require("../../../assets/lct.png")} />
          <div>流程展示</div>
          <MyIcon
            onClick={onClick}
            className={styles["big"]}
            type="icon-fangda"
          />
        </div>
      </CockpitBox>
    )
  }

  // 项目现场视频
  getXiangMuSP = () => {
    return (
      <CockpitBox
        title="项目现场视频"
        icon="icon-bancai-"
        className={styles["xiang-mu-sp-wrapper"]}
      >
        <div className={styles["inner"]}>
          <div className={styles["row"]}>
            <video src={require("../../../assets/video/dwjsd.mp4")} controls></video>
            <div>北侧大门</div>
            {/* <div className={styles["big"]} >572M</div> */}
          </div>
          <div className={styles["line"]}></div>
          <div className={styles["row"]}>
            <video src={require("../../../assets/video/dwjsd.mp4")} controls></video>
            <div>仓库西北角</div>
            {/* <div className={styles["big"]} >502M</div> */}
          </div>
        </div>
      </CockpitBox>
    )
  }

  // 视频通话
  getSPTH = () => {
    return (
      <CockpitBox
        title="视频通话"
        icon="icon-bancai-"
        className={styles["xiang-mu-sp-wrapper"]}
      >
        <div className={styles["inner"]}>
          <div className={styles["row"]}>
            <video src={require("../../../assets/video/dwjsd.mp4")} controls></video>
          </div>
        </div>
      </CockpitBox>
    )
  }

  // 废弃物产生量
  getXiangMuFQW = () => {
    return (
      <CockpitBox
        title="废弃物产生量"
        icon="icon-bancai-"
        className={styles["xiang-mu-sp-wrapper"]}
      >

        <Carousel className={styles['process-supervision-carousel']} ref="welcome" autoplay={true}>
          {/* <RightChartPie /> */}
          {/* <RightChartPie /> */}

        </Carousel>
      </CockpitBox>
    )
  }

  // 实时烟气
  getXiangMuSSYQ = () => {
    return (
      <CockpitBox
        title="实时烟气"
        icon="icon-bancai-"
        className={styles["xiang-mu-sp-wrapper"]}
      >
        <Carousel className={styles['process-supervision-carousel']} ref="welcome" autoplay={true}>
          {/* <RightChartBarSSYQ /> */}
          {/* <RightChartBarSSYQ /> */}

        </Carousel>

      </CockpitBox>
    )
  }

  getContent = () => {
    const { pointType, type } = this.props;
    let style = {
      marginBottom: 10
    }

    if (pointType.indexOf("qnhb") != -1) {
      return (
        <div>
          <CockpitBox
            className={styles['right-content-box']}
            title='垃圾处理分析'
            icon="icon-xibao_cellscopy"
            style={{ marginBottom: 10 }}
          // rightRender={<CockpitArrow onClick={t.onMoreClick} />}
          >
            <Myljclfx />

          </CockpitBox>

          <CockpitBox
            className={styles['right-content-box']}
            title='能源统计分析'
            icon="icon-xibao_cellscopy"
            style={{ marginBottom: 10 }}
          // rightRender={<CockpitArrow onClick={t.onMoreClick} />}
          >
            <Mynytjfx />

          </CockpitBox>

          <CockpitBox
            className={styles['right-content-box']}
            title='耗材耗量分析'
            icon="icon-xibao_cellscopy"
            style={{ marginBottom: 10 }}
          // rightRender={<CockpitArrow onClick={t.onMoreClick} />}
          >
            <Myhchlfx />

          </CockpitBox>
        </div>
      )
    }






  }

  onGongsiqh = (v) => {
    this.setState({
      ssjc:v
    },() => {
      this.ssjcbj(1, 3)
    })

 
  }


  getssjcbj = () => {
    const { pageSize, pageIndex, total, ssjc, ssjcData } = this.state

    return (
      <div className={styles.Box}>
        <div className={styles.Box_T}>
          <span onClick={this.onGongsiqh.bind(this, 5)} style={{ color: ssjc == 5 ? '#70d7ff' : '#ccc', cursor: 'pointer' }}>全部</span>
          <Divider type="vertical" dashed={true} />
          <span onClick={this.onGongsiqh.bind(this, 1)} style={{ color: ssjc == 1 ? '#70d7ff' : '#ccc', cursor: 'pointer' }}>清能环保</span>
          <Divider type="vertical" dashed={true} />
          <span onClick={this.onGongsiqh.bind(this, 2)} style={{ color: ssjc == 2 ? '#70d7ff' : '#ccc', cursor: 'pointer' }}>再生资源</span>
          <Divider type="vertical" dashed={true} />
          <span onClick={this.onGongsiqh.bind(this, 3)} style={{ color: ssjc == 3 ? '#70d7ff' : '#ccc', cursor: 'pointer' }}>维尔利</span>
          <Divider type="vertical" dashed={true} />
          <span onClick={this.onGongsiqh.bind(this, 4)} style={{ color: ssjc == 4 ? '#70d7ff' : '#ccc', cursor: 'pointer' }}>清运公司</span>
        </div>
        <div className={styles.Box_B}>
          {ssjcData.length > 0 ?
            ssjcData.map((item) => {
              return (
                <div className={styles.Box_B_C} style={{ color: '#fff', overflow: 'auto' }}>
                  <div className={styles.Box_B_C_t}>
                    <img style={{ height: '60%', width: '60%' }} src={require('../../../assets/hong.png')} />
                  </div>

                  <div style={{ flex: 5, display: 'flex', flexDirection: 'column', borderBottom: '1px solid rgba(4,53,93,1)' }}>
                    <div className={styles.Box_B_C_title}>【数据超上限报警】 <span style={{ float: 'right', color: '#70D7FF' }}>8-17 15:02</span></div>
                    <div>【{item.companyName}】   <span style={{ color: '#70D7FF' }}>{item.kpiName}</span></div>
                  </div>
                  <Divider type="vertical" dashed={true} style={{ height: '50%', borderColor: 'rgba(203, 203, 203, 0.4)' }} />
                  <div className={styles.Box_B_C_t} style={{ justifyContent: 'space-around' }}>
                    <img src={require("../../../assets/xiangqing.png")} />
                    <img src={require(".././../../assets/tingzhi.png")} />
                  </div>
                </div>
              )
            }) : <div style={{color:'#fff',textAlign:'center'}}>暂无数据!</div>
          }
        </div>
        <CockpitMyPagination

          pageSize={pageSize}
          total={total}
          current={pageIndex}

          onChange={this.onChangePage.bind(this)}

        />
      </div>
    )
  }

  // 分页
  onChangePage = (page, size) => {
    this.setTimeAndSearch(this.state.params, page, size);
    this.setState({
      pageSize: size,
      pageIndex: page,
    })
  };

  setTimeAndSearch = (val, page, rows) => {

    let params = {
      page,
      rows: 3,
      type: this.state.ssjc
    }
    this.setState({
      params
    })
    request({
      url: '/sx-client/sx/onepic/ssjcbj',
      method: 'POST',
      data: params
    }).then(data => {
      if (data.rc === 0) {
        this.setState({
          ssjcData: data.ret.items,
          total: data.ret.count
        })
      }

    })
  }

  render() {
    let t = this;
    let { type, pointType } = t.props;
    let style = {
      marginBottom: 10
    }

    console.log(type, pointType)
    return (
      <div className={styles['right-content']}>
        {
          pointType == undefined ?
            <div>
              <CockpitBox
                className={styles['right-content-box']}
                title='餐厨垃圾处理'
                icon="icon-xibao_cellscopy"
                style={{ marginBottom: 10 }}
              // rightRender={<CockpitArrow onClick={t.onMoreClick} />}
              >
                <Myccljcl />

              </CockpitBox>
              <CockpitBox
                className={styles['right-content-box']}
                title='环保指标排放'
                icon="icon-keyan"
                style={{ marginBottom: 10 }}
              // rightRender={<CockpitArrow onClick={t.onMoreClick} />}
              >
                <Myhbzbpf />
              </CockpitBox>

              <CockpitBox
                className={styles['right-content-box']}
                title='实时监测报警'
                icon="icon-keyan"
              // rightRender={<CockpitArrow onClick={t.onMoreClick} />}
              >
                {this.getssjcbj()}
              </CockpitBox>

            </div> :
            <div>{this.getContent()}</div>
        }
      </div>
    )
  }
}

export default RightContent;
